import React, { Component, PropTypes } from 'react';
import { Utility, ApiInfo } from 'components';
import { connect } from 'react-redux';
import * as CommonActions from 'redux/modules/reduxCommon';

@connect(
  state => ({
    Title: state.Common.Title,                                            // 标题
    UrlParams: state.Common.UrlParams,                                    // URL参数
    DealtDetail: state.Common[Utility.constItem.StateName.DealtDetail],   // 
  }),
  { ...CommonActions })

export default class DealtEdit extends Component {
  static propTypes = {
    Title: PropTypes.string,                                            // 标题
    UrlParams: PropTypes.object,                                        // url 参数
    DealtDetail: PropTypes.object,                                      //
    onDeleteByFields: PropTypes.func,                                   // 
    onUpdateRedux: PropTypes.func,                                      // 
    onApiGet: PropTypes.func,                                           // 
    onApiPost: PropTypes.func,                                          // 
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.state.IsMount = true;
    this.__InitData();
  }

  componentWillUnmount() {
    delete this.state.IsMount;
  }

  /**
   * 更新渲染
   */
  __UpdateRender() {
    if (!!this.state.IsMount) {
      this.setState({ __CurrentTempDate: new Date().getTime() });
    }
  }

  __InitData() {
    const { UrlParams, onApiGet, DealtDetail } = this.props;
    if (!Utility.isFunction(onApiGet)) {
      return;
    }
    const { id } = UrlParams;
    if (!id) {
      return;
    }
    if (DealtDetail && DealtDetail.id === parseInt(id, 0)) {
      this.__InitRef();
      return;
    }
    Utility.$loading();
    onApiGet(Utility.constItem.StateName.DealtDetail, Utility.format(ApiInfo.JXDB.Detail, id), {}).then(() => {
      this.__InitRef();
      this.__UpdateRender();
      Utility.$loadingHide();
    }, () => {
      Utility.$loadingHide();
    });
  }

  __InitRef() {
    const { DealtDetail } = this.props;
    const { content } = DealtDetail || {};
    const { txtDesc } = this.refs;
    if (!txtDesc) {
      return;
    }
    txtDesc.value = content;
  }

  __HandlerBlur(event) {
    console.log(event.target.value);
  }

  __HandlerToGXin(isFinish) {
    const { onApiPost, onDeleteByFields, onUpdateRedux, DealtDetail } = this.props;
    if (!Utility.isFunction(onApiPost)) {
      return;
    }

    const { id } = DealtDetail;
    const content = this.refs.txtDesc.value;
    const _api = Utility.format(!!isFinish ? ApiInfo.JXDB.ToGxinFinishEdit : ApiInfo.JXDB.ToGxinEdit, id);
    Utility.$loading();
    onApiPost('ToGXinInfoEdit', _api, { data: { content } }).then(() => {
      onDeleteByFields('GxMessageDealt', { Key: 'id', Value: id });
      onUpdateRedux();
      Utility.$goBack();
    }, () => {
      Utility.$loadingHide();
    });
  }


  render() {
    const styles = require('./scss/DealtEdit.scss');

    return (
      <div className={styles.dealtEditCss}>
        <textarea className={styles.desc} maxLength="500"
          ref="txtDesc" onBlur={this.__HandlerBlur.bind(this)}></textarea>

        <div className={styles.btns}>
          <div onClick={this.__HandlerToGXin.bind(this, false)}>转成G信</div>
          <div onClick={this.__HandlerToGXin.bind(this, true)}>完成</div>
        </div>
      </div>
    );
  }
}

